<template>
  <div class="guide-component">
    <el-tooltip :content="$t('navBar.guide')">
      <svg-icon
        id="guide-start"
        icon="guide"
        @click="onClick"
      />
    </el-tooltip>
  </div>
</template>

<script setup>
import { onMounted } from "vue";
import { driver } from "driver.js";
import "driver.js/dist/driver.css";
import steps from "./steps";
import { useI18n } from "vue-i18n";
import { watchLangChange } from "@/utils/i18n";

onMounted(() => {
  initDriver();
});

let driverObj = null;
const initDriver = () => {
  driverObj = driver({
    animate: false,
    // 禁止点击蒙版关闭
    allowClose: false,
    closeBtnText: i18n.t("guide.close"),
    nextBtnText: i18n.t("guide.next"),
    prevBtnText: i18n.t("guide.prev"),
    showProgress: true,
    steps: steps(i18n),
  });
};

const i18n = useI18n();
const onClick = () => {
  driverObj.drive();
};

watchLangChange(initDriver);
</script>

<style lang="scss" scoped>
.guide-component {
  font-size: 24px;
}
</style>
